<!-- 发布闲置的分类 -->
<template>
	<view class="container">
		<template v-for="(item,i) in types">
			<view 
				:key="item.id" 
				class="type-item" :class="item.id==current_id?'active':''"
				@click="change_current_id(item.id)">
				{{item.name}}
			</view>
		</template>
		<view class="confirm" @click="confirm">
			确定
		</view>
	</view>
</template>
<!-- js -->
<script>
	// 引入封装的请求
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				// 分类列表
				types:[],
				// 当前选中的分类
				current_id:null
			}
		},
		computed: {
			
		},
		watch: {
			
		},
		onLoad() {
			
		},
		onShow() {
			this.get_cate_list()
		},
		methods: {
			// 获取分类列表
			get_cate_list(){
				let that = this
				request.get('Mini/goods/goodsClass').then(res => {
					// console.log(res)
					if (res.status) {
						that.types = res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 改变当前选中的分类
			change_current_id(id){
				this.current_id = id
			},
			// 确认当前分类
			confirm(){
				let that = this
				let current_types = this.types.filter(v=>{
					return v.id == that.current_id
				})[0]
				uni.setStorage({
					key:'goods_types',
					data: JSON.stringify(current_types),
					success() {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>
<!-- css -->
<style lang="scss" scoped>
	.container{
		width: 100vw;
		background-color: #fff;
		box-sizing: border-box;
		font-family: PingFang SC;
		overflow: auto;
		padding-bottom: 46rpx;
		padding-left: 24rpx;
		padding-right: 25rpx;
		border-top:1rpx solid #DCDCDC;
		.type-item{
			width: 100%;
			height: 80rpx;
			border-bottom:1rpx solid #DCDCDC;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: Hiragino Sans GB;
			font-weight: normal;
			color: #333333;
			padding-left: 22rpx;
			line-height: 80rpx;
			&.active{
				background-color: #F3F5F8;
			}
		}
		.confirm{
			margin-top: 80rpx;
			width: 690rpx;
			height: 90rpx;
			background: linear-gradient(3deg, #FC9E00 0%, #FBB10D 76%);
			border-radius: 45rpx;
			font-size: 36rpx;
			font-weight: normal;
			color: #FEFEFE;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
